<script setup>
import useStore from "../../store/index.js";
import {computed, onMounted, ref} from "vue";
import __ from 'lodash'
import {getCurrentUser} from "../../apis/UserApi.js";
import {BASE_URL} from "../../config/index.js";
import {Message} from "@arco-design/web-vue";
import {getSurveysListApi, getUserStatisticsApi} from "../../apis/SurveysApi.js";
import {useRouter} from "vue-router";

const router = useRouter()
const store = useStore()
//我创建的问卷列表
const mySurveyList = ref([])
const isLoading = ref(true)
//开启动画
const startStatisticsAnimation = ref(false)
const userStatistics = ref({
    templateApplyNum: 0,
    surveyNum: 0,
    surveySubmitNum: 0,
    templateNum: 0,
})
const userAvatar = computed(() => {
    //如果用户头像为空 使用默认头像
    if (__.isEmpty(store.userinfo.userAvatar)){
        return "/default-avatar.png"
    }else{
        return store.userinfo.userAvatar
    }
})
// 获取我的问卷
const getMySurveyList = async () => {
    const res = await getSurveysListApi(1,10,{})
    isLoading.value = false
    if (res.code === 0){
        mySurveyList.value = res.data.records
    }
}
// 上传头像
const uploadSuccess = (info) => {
    if (info.response.code === 0){
        Message.success("上传成功")
        getCurrentUser()
    }else{
        Message.error(info.response.message)
    }
}
const getUserStatistics = async () =>{
   startStatisticsAnimation.value = false
   const res = await getUserStatisticsApi()
    if (res.code === 0){
        userStatistics.value = res.data
        startStatisticsAnimation.value = true
    }
}
function goStatistics(t){
    router.push("/statistics/" + t.id)
}
const goPreView = (template) => {
    router.push("/preview/" + template.id)
}
const goWorkbench = (template) => {
    router.push("/workbench/" + template.id)
}
onMounted(() => {
    getMySurveyList()
    getUserStatistics()
})

</script>

<template>
    <div class="header">
        <a-space :size="12" direction="vertical" align="center">
            <a-upload
                :action="BASE_URL + '/files/updateAvatar'"
                accept="image/*"
                name="file"
                with-credentials
                @success="uploadSuccess"
                :show-file-list="false"
                multiple>
                <template #upload-button>
                    <a-avatar :size="80">
                        <img :src="userAvatar" style="width: 100%; height: 100%; object-fit: cover"/>
                    </a-avatar>
                </template>
            </a-upload>

            <a-typography-title :heading="6" style="margin: 0">
                <p class="text-lg font-bold">{{ store.userinfo.userName }}</p>
            </a-typography-title>
            <div class="user-msg">
                <a-space :size="18">
                    <div>
                        <icon-user />
                        <a-typography-text>{{ store.userinfo.userAccount }}</a-typography-text>
                    </div>
                    <div>
                        <icon-email />
                        <a-typography-text>
                            {{ store.userinfo.userEmail ? store.userinfo.userEmail : '未填写' }}
                        </a-typography-text>
                    </div>
                    <div>
                        <icon-phone />
                        <a-typography-text>{{ store.userinfo.userPhone ? store.userinfo.userPhone : '未填写' }}</a-typography-text>
                    </div>
                </a-space>
            </div>
        </a-space>
    </div>
    <div class="w-4/5 mx-auto mt-12 border p-4 rounded">
        <div class="max-w-[27rem] mx-auto">
            <a-space size="large">
                <a-statistic :start="startStatisticsAnimation" title="我的问卷数" :value="userStatistics.surveyNum" animation
                             :value-from="0" show-group-separator />
                <a-statistic :start="startStatisticsAnimation" title="问卷提交总数" :value="userStatistics.surveySubmitNum" animation
                             :value-from="0" show-group-separator />
                <a-statistic :start="startStatisticsAnimation" title="创建的模板数量" :value="userStatistics.templateNum" animation
                :value-from="0" />
                <a-statistic :start="startStatisticsAnimation" title="模板被使用总数" :value="userStatistics.templateApplyNum" animation
                :value-from="0" />
            </a-space>
        </div>
    </div>



    <div class="w-4/5 mx-auto mt-12 shadow-lg rounded
                border border-gray-300 min-h-96">
<!--        我的问卷-->
        <h2 class="text-center mt-2"> 我的问卷</h2>
        <div class="w-full p-4 flex justify-around flex-wrap">
<!--            <a-card-->
<!--                v-for="template in mySurveyList"-->
<!--                :key="template.id"-->
<!--                class="card-demo"-->
<!--                :title="template.title"-->
<!--                hoverable>-->
<!--                <template #extra>-->
<!--                    <a-link @click="goWorkbench(template)">编辑</a-link>-->
<!--                    <a-link @click="goPreView(template)">预览</a-link>-->
<!--                </template>-->
<!--                <p class="h-9">描述：{{template.description}}</p>-->
<!--                <br>-->
<!--                <div class="flex justify-between">-->
<!--                    <p class="text-right pr-2">题目数量：{{template.questionNum}}</p>-->
<!--                    <p class="text-right pr-2">答题次数：{{template.submitNum}}</p>-->

<!--                </div>-->
<!--            </a-card>-->
            <a-list class="w-full" :loading="isLoading">
                <a-list-item v-for="item in mySurveyList" :key="item.id">
                    <a-list-item-meta
                        :title="item.title"
                        :description="item.description">
                        <template #avatar>
                            <a-avatar shape="square">
                                <img
                                    alt="avatar"
                                    :src="item.bgimg"
                                />
                            </a-avatar>
                        </template>
                    </a-list-item-meta>
                    <template #actions>
                        <icon-bar-chart  class="cursor-pointer" @click="goStatistics(item)"/>
                        <icon-eye class="cursor-pointer" @click="goPreView(item)"/>
                        <icon-edit class="cursor-pointer" @click="goWorkbench(item)"/>
                    </template>
                </a-list-item>
            </a-list>
        </div>
    </div>
</template>

<style scoped>
.header {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 204px;
    color: var(--gray-10);
    background: url(//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/41c6b125cc2e27021bf7fcc9a9b1897c.svg~tplv-49unhts6dw-image.image) no-repeat;
    background-size: cover;
    border-radius: 4px;
}

.header .arco-avatar-trigger-icon-button {
    color: rgb(var(--arcoblue-6));
}

.header .arco-avatar-trigger-icon-button .arco-icon {
    vertical-align: -1px;
}

.header .user-msg .arco-icon {
    color: rgb(var(--gray-10));
}

.header .user-msg .arco-typography {
    margin-left: 6px;
}
.card-demo {
    width: 260px;
    margin-bottom: 10px;
    margin-left: 24px;
    transition-property: all;
}
.card-demo:hover {
    transform: translateY(-4px);
}
</style>

